{% extends 'base-static.html' %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/modules/layer/skin/layer.css' %}">

{% endblock %}

{% block content %}
    <section class="content-header">
        <h1>
            路由列表
        </h1>
        <ol class="breadcrumb">
            <li><a href="{% url 'system:index' %}"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">路由列表</li>
        </ol>
    </section>

    <section class="content">
        <div class="box-body">
            {% csrf_token %}
            <div class="demoTable" style="margin-bottom: 20px;">
                <label style="font-weight: 500;!important;">路由器名称：</label>
                <div class="layui-inline">
                    <input class="layui-input" name="mac_name" id="mac_name" autocomplete="off">
                </div>

                <label style="margin-left: 30px;font-weight: 500;!important;">路由器 Mac：</label>
                <div class="layui-inline">
                    <input class="layui-input" name="mac_addr" id="mac_addr" autocomplete="off">
                </div>

                <label style="margin-left: 30px;font-weight: 500;!important;">绑定服务器：</label>
                <div class="layui-inline">
                    <input class="layui-input" name="server" id="server" autocomplete="off">
                </div>
                <button class="layui-btn" data-type="getInfo" id="filter">搜索</button>
            </div>

            <table id="dtbList" lay-filter="test" class="display" cellspacing="0" width="100%">

            </table>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="bind">绑定</a>
                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="unbind">解绑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                <a class="layui-btn  layui-btn-xs" lay-event="detail">详情</a>
                <a class="layui-btn  layui-btn-xs" lay-event="device">设备列表</a>
            </script>

            <script type="text/html" id="Tpl">
                <a href="/detail/{{ d.mac }}" class="layui-table-link">{{ d.tunnel }}</a>
            </script>
            <br> <br>

        </div>
    </section>

    <!--修改名称-->
    <form class="layui-form" onsubmit="return false;" id="change_name" style="display: none;">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="输入新名称"
                       autocomplete="off" class="layui-input" style="margin-left: -50px;margin-top: 20px;"
                       id="new_name">
            </div>
        </div>
    </form>

{% endblock %}


{% block js %}
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.const.js' %}"></script>
    <script src="{% static 'plugins/layui/layui.js' %}"></script>
    <script src="{% static 'plugins/layui/css/modules/layer/layer.js' %}"></script>
    <script>
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var form = layui.form;
            form.render();

            // 表格渲染
            table.render({
                elem: '#dtbList',
                id: 'Reload',
                height: 612,
                url: '/system/route/list/',
                method: 'get',
                page: true,
                cellMinWidth: 120,
                cols: [[
                    {
                        field: 'name',
                        title: '路由器名称',
                        fixed: 'left',
                        templet: function (d) {
                            return '<a href="javascript:void(0)" class="layui-table-link" onclick="changeName(this)" mac=' + d.mac + '>' + d.name + '</a>'
                        }
                    }
                    , {field: 'mac', title: 'Mac 地址', sort: true}
                    , {
                        field: 'status',
                        title: '状态',
                        templet: function (d) {
                            if (d.status === '在线') {
                                return '<span class="label label-primary" style="background-color:#1ab394 !important;color:white;">' + d.status + '</span>';
                            } else {
                                return '<span class="label label-primary" style="background-color:#FF5722 !important;color:white;">' + d.status + '</span>';
                            }
                        }
                    }
                    , {field: 'server', title: '绑定服务器'}
                    , {field: 'tunnel', title: '通道', sort: true}
                    , {field: 'ip', title: '内网IP', align: 'center', sort: true}
                    , {title: '操作', fixed: 'right', width: 300, align: 'center', toolbar: '#barDemo'}
                ]
                ],
            });

            // 监听行工具栏事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;   // 获取选中的数据
                var layEvent = obj.event;   // 获取 lay-event 对应的值
                var tr = obj.tr;    // 获取当前行 tr 的 DOM 对象

                var mac_addr = data.mac;

                if (layEvent === 'bind') {
                    var mac_status = $(tr).find("td[data-field='status']").children().text();

                    if (mac_status === '离线') {
                        layer.alert('设备不在线无法进行绑定', {icon: 5});
                        return
                    }

                    layer.open({
                        type: 2,
                        area: ['800px', '450px'],
                        maxmin: false,  // 禁止放大、全屏
                        fixed: false,
                        resize: false,  // 禁止拉伸
                        move: false,    // 禁止拖动
                        title: '选择服务器绑定',
                        content: ['{% url 'system:route-bind' %}' + '?mac=' + mac_addr],
                        end: function () {
                            table.reload('Reload', 'data');
                        }
                    });
                } else if (layEvent === 'unbind') {
                    layer.confirm('确定是否解绑设备？', {
                        icon: 3,
                        title: '提示'
                    }, function (index) {
                        unbind(mac_addr);
                        layer.close(index);
                    });
                } else if (layEvent === 'del') {
                    layer.confirm('确定删除设备？', {
                        icon: 3,
                        title: '提示',
                    }, function (index) {
                        del(mac_addr);
                        layer.close(index);
                    });
                } else if (layEvent === 'detail') {
                    layer.open({
                        type: 2,
                        area: ['800px', '550px'],
                        maxmin: false,
                        fixed: false,
                        resize: false,
                        title: '路由器详情',
                        shadeClose: false,
                        content: ["{% url 'system:route-detail' %}" + '?mac_addr=' + data.mac + '&status=' + data.status, 'no'],
                    })
                } else if (layEvent === 'device') {
                    var url = ["{% url 'system:route-detail' %}" + '?mac_addr=' + data.mac + '&status=' + data.status + '&flag=device'];
                    $.get(url, function (resp) {
                        if (resp["route_type"] === "C") {
                            layer.alert('客户端无设备列表', {icon: 7});
                            return false;
                        } else {
                            window.location.href = ["{% url 'system:device' %}" + "?mac_addr=" + mac_addr];
                        }
                    });

                }

            });


            // 解绑
            function unbind(mac_addr) {
                $.ajax({
                    type: 'get',
                    url: ['{% url 'system:route-update' %}' + '?mac_addr=' + mac_addr],
                    cache: false,
                    success: function (resp) {
                        var msg = resp.msg;
                        if (resp.code === 0) {
                            layer.alert(msg, {icon: 1}, function (index) {
                                parent.layer.closeAll();    // 关闭所有弹窗
                            });
                            table.reload('Reload', 'data');
                        } else {
                            layer.alert(msg, {icon: 5});
                        }

                    }
                });
            }

            // 删除
            function del(mac_addr) {
                $.ajax({
                    type: 'get',
                    url: ['{% url 'system:route-delete' %}' + '?mac_addr=' + mac_addr],
                    cache: false,
                    success: function (resp) {
                        var msg = resp.msg;
                        if (resp.code === 0) {
                            layer.alert(msg, {icon: 1}, function (index) {
                                parent.layer.closeAll();    // 关闭所有弹窗
                            });
                            table.reload('Reload', 'data');
                        } else {
                            layer.alert(msg, {icon: 5});
                        }
                    }
                });
            }

            // 过滤
            $('#filter').click(function () {
                var mac_name = $('#mac_name').val();
                var mac_addr = $('#mac_addr').val();
                var server = $('#server').val();
                table.reload('Reload', {
                    where: {
                        'mac_name': mac_name,
                        'mac_addr': mac_addr,
                        'server': server
                    }
                })
            })


        });


        $(document).ready(function () {
            mac_timer();
        });

        function mac_timer() {
            var timer = setInterval(function () {
                check_mac_online();
            }, 30000);

        }

        // 检查 Mac 是否在线
        function check_mac_online() {
            var mac_list = $("td[data-field='mac']");
            if (mac_list.length === 0) {
                return;
            }
            $.ajax({
                type: 'get',
                url: '{% url 'system:check-mac-online' %}',
                cache: false,
                success: function (resp) {
                    $.each(mac_list, function (index) {
                        var mac = $(this).text();
                        var mac_status = resp[mac]['status'];
                        var ip = resp[mac]['ip'];

                        $(this).next().children().find('span').text(mac_status);
                        $(this).nextAll().eq(3).children().text(ip);
                    })
                }
            });
        }

        // 修改名称
        function changeName(that) {
            var mac_addr = $(that).attr('mac');
            var mac_name = $(that).text();
            $('#new_name').val(mac_name);
            layer.open({
                type: 1,
                area: ['300px', '180px'],
                maxmin: false,  // 禁止放大、全屏
                fixed: false,
                resize: false,  // 禁止拉伸
                title: '修改名称',
                content: $("#change_name"),
                btn: ['提交', '取消'],
                btn1: function (index, layero) {
                    var new_name = $('#new_name').val();
                    if (new_name.length === 0) {
                        layer.alert('名称不能为空', {icon: 7});
                        return false;
                    } else if (new_name.length >= 15 || new_name.length < 5) {
                        layer.alert('名称长度 5-15个字符', {icon: 7});
                        return false;
                    } else {
                        $.ajax({
                            url: ["{% url 'system:route-name-update' %}" + '?new_name=' + new_name + '&mac_addr=' + mac_addr + '&name=' + mac_name],
                            type: 'get',
                            cache: false,
                            success: function (resp) {
                                if (resp.code === 0) {
                                    layer.alert(resp.msg, {icon: 1}, function (index) {
                                        parent.layer.closeAll(); // 关闭所有弹窗
                                        $(that).text(new_name);
                                    });

                                } else {
                                    layer.alert(resp.msg, {icon: 5});
                                }
                            }

                        })
                    }

                },
                btn2: function (index, layero) {
                    layer.closeAll();
                }

            });
        }
    </script>

{% endblock %}
